<template>
  <div id="rank">
    <div :style="{fontSize:titleSize +'px'}">{{ title }}</div>
    <p v-for="(rank,index) in ranks" :key="rank.id">
      <span>{{index + 1}}</span>
      <span @click="changeLink(rank.id)">
        {{rank.title}}
        &emsp;<span style="color:#FC4349;font-size:10px;"><i class="iconfont icon-yuedu1"></i>&nbsp;{{rank.read_num}}</span>
      </span>
    </p>
  </div>
</template>

<script>
export default {
  name: "ArticleRank",
  props:{
    ranks:Array,
    title:String,
    titleSize:Number
  },
  methods:{
    changeLink(id){
      // this.$router.push({name:"detail",query:{id}})
      window.open("/detail?id=" + id)
    }
  }
}
</script>

<style scoped>

#rank div{
  font-size:24px;
  line-height: 40px;
  border-bottom: 1px solid #C4C1C1;
  margin-bottom:10px;
}

#rank > p{
  font-size:16px;
  color:#2C3E50;
}

#rank p span{
  display: inline-block;
  box-sizing: border-box;
  vertical-align: top;
  line-height: 22px;
  margin-bottom:4px;
}
#rank > p > span:first-child{
  width:5%;
}
#rank > p > span:last-child{
  width:90%;
}

#rank > p:hover{
  color:#FC4349;
  cursor:pointer;
}
</style>
